import { ref, computed } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import dayjs from 'dayjs'
/**
 * 检测可见，发送请求
 * @param apiFn 发送请求的函数
 * @returns {Object} {list,target}
 */
export const useObserver = (apiFn) => {
  // 通过ref 获得组件实例
  const target = ref(null)
  // 商品列表
  const list = ref([])

  // 检测元素可见性 （懒加载）
  const { stop } = useIntersectionObserver(
    // 被检测目标DOM元素或组件
    target,
    ([{ isIntersecting }]) => {
      // 如果元素可见
      if (isIntersecting) {
        // 发送异步请求
        apiFn().then(({ result }) => {
          list.value = result
        })
        // 停止检测
        stop()
      }
    }
  )
  return { list, target }
}

/**
 * 倒计时逻辑函数封装
 * @param {Number} time 倒计时秒数
 * @returns {Object} { countTime, resumeBtn,countTimeText, pause }
 */
export const useCountDown = (time = 60) => {
  // 用于倒计时的响应式数据
  const countTime = ref(0)

  const countTimeText = computed(() => {
    return dayjs.unix(countTime.value).format('mm分ss秒')
  })

  // resume, pause 代表开启 停止
  const { resume, pause } = useIntervalFn(() => {
    countTime.value--
    // 倒计时结束停止定时器
    if (countTime.value <= 0) {
      pause()
    }
  }, 1000, { immediate: false }) // { immediate: false } 表示不立刻执行定时器（调用后执行）

  // 启动倒计时的函数封装
  const resumeBtn = (newTime) => { // resumeBtn替代了start
    // 初始化倒计时秒数
    if (countTime.value === 0) {
      // 优先使用 start 传递的时间，如果没有则使用默认的 60秒
      countTime.value = newTime || time
      // 启动定时器
      resume()
    }
  }

  return { countTime, resumeBtn, countTimeText, pause }
}
